<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<style type="text/css">
			body{margin:10px auto;width: 750px;}ul{margin-top:5px;}li{margin-top:3px;}.layui-form-switch{margin-top: 0;}#tree1 ul+ul{border-top: 1px dashed #e2e2e2;}
		</style>
	</head>
	<body>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm get-checked">获取选中</button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm refresh">刷新（新增）</button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm open-all">全部展开</button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm close-all">全部关闭</button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm change-icon">随机更换小图标</button>
		
		<table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>
		
		<hr class="layui-bg-green">
		
		<div id="tree"  class="layui-anim"></div>
		
		<hr class="layui-bg-green">
		
		<div class="layui-unselect layui-form-select">
			<div class="layui-select-title" style="position: relative;"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div>
			<div id="tree1"  class="layui-anim" style="display: none;border: 1px solid #e2e2e2;padding: 5px;margin-top: 5px;"></div>
		</div>
		
		<hr class="layui-bg-green">
		
		<div class="layui-unselect layui-form-select">
			<div class="layui-select-title" style="position: relative;"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div>
			<table class="layui-table layui-form layui-anim" id="tree-table1" lay-size="sm" style="display: none;"></table>
		</div>
		
		<hr class="layui-bg-green">
		
		<div id="tree"></div>
		
<pre class="layui-code">// 配置参数可自由搭配尝试不同效果
{
	elem: '#tree-table',// 必须
	url: 'data/table-tree.json',// （url和data参数必须设置一个）
	data: [{},{},{},...],
	icon_key: 'title',// 必须
	top_value: 0,
	primary_key: 'id',
	parent_key: 'pid',
	hide_class: 'layui-hide',
	icon: {
		open: 'layui-icon layui-icon-triangle-d',
		close: 'layui-icon layui-icon-triangle-r',
		left: 16,
	},
	cols: [{
		key: 'title',
		title: '名称',
		width: '100px',
		template: function(item){return '显示内容'}
	},{},...],
	checked: {
		key: 'id',
		data: [0,1,4,10,11,5,2,6,7,3,8,9],
	},
	is_click_icon: false,
	is_checkbox: false,
	is_cache: true,
	end: function(e){},
}
</pre>
		
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript">
			layui.config({
				base: 'js/',
			})
			layui.use(['treeTable','layer','code','form'],function(){
				var o = layui.$,
					form = layui.form,
					layer = layui.layer,
					treeTable = layui.treeTable;
				// 直接下载后url: './data/table-tree.json',这个配置可能看不到数据，改为data:[],获取自己的实际链接返回json数组
				var	re = treeTable.render({
					elem: '#tree-table',
					data: [{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}],
					icon_key: 'title',
					is_checkbox: true,
					checked: {
						key: 'id',
						data: [0,1,4,10,11,5,2,6,7,3,8,9],
					},
					end: function(e){
						form.render();
					},
					cols: [
						{
							key: 'title',
							title: '名称',
							width: '100px',
							template: function(item){
								if(item.level == 0){
									return '<span style="color:red;">'+item.title+'</span>';
								}else if(item.level == 1){
									return '<span style="color:green;">'+item.title+'</span>';
								}else if(item.level == 2){
									return '<span style="color:#aaa;">'+item.title+'</span>';
								}
							}
						},
						{
							key: 'id',
							title: 'ID',
							width: '100px',
							align: 'center',
						},
						{
							key: 'pid',
							title: '父ID',
							width: '100px',
							align: 'center',
						},
						{
							title: '开关',
							width: '100px',
							align: 'center',
							template: function(item){
								return '<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">';
							}
						},
						{
							title: '操作',
							align: 'center',
							template: function(item){
								return '<a lay-filter="add">添加</a> | <a target="_blank" href="/detail?id='+item.id+'">编辑</a>';
							}
						}
					]
				});
				treeTable.render({
					elem: '#tree-table1',
					url: './data/table-tree.json',
					icon_key: 'title',
					is_checkbox: true,
					cols: [
						{
							key: 'title',
							title: '名称',
							width: '100px',
							template: function(item){
								if(item.level == 0){
									return '<span style="color:red;">'+item.title+'</span>';
								}else if(item.level == 1){
									return '<span style="color:green;">'+item.title+'</span>';
								}else if(item.level == 2){
									return '<span style="color:#aaa;">'+item.title+'</span>';
								}
							}
						},
						{
							key: 'id',
							title: 'ID',
							width: '100px',
							align: 'center',
						},
						{
							key: 'pid',
							title: '父ID',
							width: '100px',
							align: 'center',
						},
					]
				});
				treeTable.render({
					elem: '#tree',
					url: './data/table-tree.json',
					icon_key: 'title',
					is_checkbox: true,
					icon: {
						open: 'layui-icon layui-icon-rate',
						close: 'layui-icon layui-icon-rate-solid',
						left: 16,
					},
					cols: [
						{
							key: 'title',
							title: '名称',
						},
					]
				});
				treeTable.render({
					elem: '#tree1',
					url: './data/table-tree.json',
					icon_key: 'title',
					cols: [
						{
							key: 'title',
							title: '名称',
						},
					]
				});
				// 监听展开关闭
				treeTable.on('tree(flex)',function(data){
					layer.msg(JSON.stringify(data));
				})
				// 监听checkbox选择
				treeTable.on('tree(box)',function(data){
					if(o(data.elem).parents('#tree-table1').length){
						var text = [];
						o(data.elem).parents('#tree-table1').find('.cbx.layui-form-checked').each(function(){
							o(this).parents('[data-pid]').length && text.push(o(this).parents('td').next().find('span').text());
						})
						o(data.elem).parents('#tree-table1').prev().find('input').val(text.join(','));
					}
					layer.msg(JSON.stringify(data));
				})
				// 监听自定义
				treeTable.on('tree(add)',function(data){
					layer.msg(JSON.stringify(data));
				})
				// 获取选中值，返回值是一个数组（定义的primary_key参数集合）
				o('.get-checked').click(function(){
					layer.msg('选中参数'+treeTable.checked(re).join(','))
				})
				// 刷新重载树表（一般在异步处理数据后刷新显示）
				o('.refresh').click(function(){
					re.data.push({"id":50,"pid":0,"title":"1-4"},{"id":51,"pid":50,"title":"1-4-1"});
					treeTable.render(re);
				})
				// 全部展开
				o('.open-all').click(function(){
					treeTable.openAll(re);
				})
				// 全部关闭
				o('.close-all').click(function(){
					treeTable.closeAll(re);
				})
				// 随机更换小图标
				o('.change-icon').click(function(){
					var arr = [
						{
							open: 'layui-icon layui-icon-set',
							close: 'layui-icon layui-icon-set-fill',
							left: 16,
						},
						{
							open: 'layui-icon layui-icon-rate',
							close: 'layui-icon layui-icon-rate-solid',
							left: 16,
						},
						{
							open: 'layui-icon layui-icon-tread',
							close: 'layui-icon layui-icon-praise',
							left: 16,
						},
						{
							open: 'layui-icon layui-icon-camera',
							close: 'layui-icon layui-icon-camera-fill',
							left: 16,
						},
						{
							open: 'layui-icon layui-icon-user',
							close: 'layui-icon layui-icon-group',
							left: 16,
						},
					];
					var round = Math.round(Math.random()*(arr.length - 1));
					re.icon = arr[round];
					treeTable.render(re);
				})
				o('#tree1').on('click','[data-down]',function(){
					o(this).find('span').length && o(this).parents('.layui-unselect').find('input').val(o(this).text());
				})
				o('.layui-select-title').click(function(){
					o(this).parent().hasClass('layui-form-selected') ? o(this).next().hide() : o(this).next().show(),o(this).parent().toggleClass('layui-form-selected');
				})
				o(document).on("click", function(i) {
					!o(i.target).parent().hasClass('layui-select-title') && !o(i.target).parents('table').length && !(!o(i.target).parents('table').length && o(i.target).hasClass('layui-icon')) && o(".layui-form-select").removeClass("layui-form-selected").find('.layui-anim').hide();
				})
			})
		</script>
	</body>
</html>
